import type { Meta, StoryObj } from '@storybook/react';
import { SingleLineTextWithTooltip } from '.';
import { Box } from '@mui/material';

// SingleLineTextWithTooltip 组件的 Meta 配置
const meta = {
  title: '组件/文本/单行文本',
  component: SingleLineTextWithTooltip,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <Box sx={{ width: '300px', p: 2, border: '1px solid #ddd' }}>
        <Story />
      </Box>
    ),
  ],
} satisfies Meta<typeof SingleLineTextWithTooltip>;

export default meta;
type Story = StoryObj<typeof meta>;

// 单行文本组件的故事
export const Default: Story = {
  name: '基础单行文本',
  args: {
    text: '这是一段较长的单行文本，当内容超出容器宽度时会自动截断并显示省略号，用户悬停时通过Tooltip展示完整内容。',
    variant: 'body1',
  },
};

export const WithinWidth: Story = {
  name: '未超出容器宽度',
  args: {
    text: '短文本不会触发tooltip',
    variant: 'body1',
  },
};

export const Advanced: Story = {
  name: '高级定制单行文本',
  args: {
    text: '这是一个高级定制的单行文本示例，可自定义字体、颜色、粗细等样式。',
    variant: 'h6',
    color: 'primary',
    fontWeight: 'bold',
    sx: {
      p: 2,
      bgcolor: '#f5f5f5',
      borderRadius: '4px',
    },
  },
};
